<template>
  <div id="app">
    <router-view />
    <myfooter></myfooter>
    <div class="gotop" v-show="showType" @click="gotopFun"></div>
  </div>
</template>
<script>
//引入底部导航条
import myfooter from "@/components/commonh/myfooter";

export default {
  data: function () {
    return {
      showType: false,
    };
  },
  components: {
    myfooter,
  },
  mounted () {
    console.log(16, this.$route);
    //挂载 scroll事件
    window.addEventListener("scroll", this.scrollFun, true);
  },
  methods: {
    scrollFun () {
      console.log("滚动事件触发了");
      //获取滚动高度
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      console.log(scrollTop);
      if (scrollTop > 200) {
        this.showType = true;
      } else {
        this.showType = false;
      }
    },
    gotopFun () {
      //点击滚动到顶部  ，setInterval
      document.documentElement.scrollTop = document.body.scrollTop = 0;
    },
  },
};
</script>

<style>
/*reset 清除浏览器的默认样式*/
* {
  padding: 0;
  margin: 0;
}
ul,
li {
  list-style: none;
}
a {
  text-decoration: none;
}
/*reset*/

.gotop {
  width: 90px;
  height: 90px;
  border: 1px solid skyblue;
  background: url("http://p0.meituan.net/scarlett/448afce485c1f342895185c2be668fa411803.png");
  background-position: -17px -14px;
  border-radius: 50%;
  position: fixed;
  bottom: 100px;
  right: 20px;
  line-height: 100px;
  text-align: center;
  font-size: 20px;
}
</style>
